import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    icon: "icon-shouyefill",
    title: '首页',
    redirect: '/home',
    component: () => import(/* webpackChunkName: "about" */ '../views/Layout/MainLayout.vue'),
    meta: {
      titles: ['首页']
    },
    children: [
      {
        path: '/home',
        name: 'home',
        title: '首页',
        icon: "dashboard",
        // route level code-splitting
        // this generates a separate chunk (home.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "home" */ '../views/Home/index.vue')
      },
      {
        path: '/about',
        name: 'About',
        title: 'about',
        icon: "dashboard",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
      },
      {
        path: '/js',
        name: 'Js',
        icon: "icon-bxs-file-js",
        title: 'Js',
        redirect: '/js/test',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "test" */ '../views/Js/index.vue'),
        children: [
          {
            path: '/js/test',
            title: 'test',
            name: 'Test1',
            icon: "dashboard",
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "test" */ '../views/Test.vue'),
          },
          {
            path: '/js/concurrentRequest',
            title: '并发请求',
            name: 'ConcurrentRequest',
            icon: "dashboard",
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "test" */ '@/views/Js/concurrentRequest/index.vue'),
          },
        ]
      },
      {
        path: '/components',
        name: 'components',
        icon: "icon-box1",
        title: '组件',
        redirect: '/myComponents/virtual',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "mobile" */ '../views/MyComponents/index.vue'),
        children:[
          {
            path: '/myComponents/virtual',   // 虚拟列表无限滚动
            name: 'virtual',
            title: '虚拟列表无限滚动',
            icon: "dashboard",
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "mobile" */ '../views/MyComponents/virtual/index.vue')
          },
          {
            path: '/components/calendar',
            name: 'calendar',
            icon: "dashboard",
            title: 'calendar日历',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited. 
            component: () => import(/* webpackChunkName: "buju" */ '../views/MyComponents/calendar/index.vue')
          },
          {
            path: '/components/myInput',
            name: 'myInput',
            icon: "dashboard",
            title: 'input输入框',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited. 
            component: () => import(/* webpackChunkName: "buju" */ '../views/MyComponents/myInput/index.vue')
          },
          {
            path: '/components/MyTable',
            name: 'MyTable',
            icon: "dashboard",
            title: 'element的table和分页二次封装',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited. 
            component: () => import(/* webpackChunkName: "buju" */ '../views/MyComponents/myTable/index.vue')
          },
          {
            path: '/components/mySearch',
            name: 'MySearch',
            icon: "dashboard",
            title: '搜索栏',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited. 
            component: () => import(/* webpackChunkName: "buju" */ '../views/MyComponents/mySearch/indexs.vue')
          },
          {
            path: '/components/myDialog',
            name: 'MyDialog',
            icon: "dashboard",
            title: '弹窗表单',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited. 
            component: () => import(/* webpackChunkName: "buju" */ '../views/MyComponents/myDialog/index.vue')
          },
        ]
      },
      {
        path: '/myVue',
        name: 'myVue',
        icon: "icon-vuejs1",
        title: 'Vue',
        redirect: '/myVue/computeds',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "test" */ '../views/MyVue/index.vue'),
        children: [
          {
            path: '/myVue/computeds',
            name: 'computeds',
            title: 'computeds',
            icon: "dashboard",
            meta: {
              isKeep: true
            },
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "computeds" */ '../views/MyVue/computeds/index.vue')
          },
        ]
      },
      {
        path: '/HtmlCss',
        name: 'HtmlCss',
        icon: "icon-html5",
        title: 'Html && Css',
        redirect: '/HtmlCss/buju',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "test" */ '../views/HtmlAndCss/index.vue'),
        children: [
          {
            path: '/HtmlCss/buju',
            name: '布局',
            icon: "dashboard",
            title: 'buJu',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "buju" */ '../views/HtmlAndCss/buju/index.vue')
          },
        ]
      },
      {
        path: '/tree',
        name: 'tree',
        title: 'tree',
        icon: "dashboard",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "tree" */ '../views/tree.vue')
      },
      {
        path: '/search',
        name: 'search',
        title: 'search',
        icon: "component",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "search" */ '../views/search.vue')
      },
      {
        path: '/selectTree',
        name: 'selectTree',
        title: 'selectTree',
        icon: "dashboard",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "selectTree" */ '../views/selectTreePage.vue')
      },
      {
        path: '/tables',
        name: 'tables',
        title: 'tables',
        icon: "dashboard",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "tables" */ '../views/tables.vue')
      },
      {
        path: '/routerNesting',
        name: 'tables',
        title: 'routerNesting',
        icon: "dashboard",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "routerNesting" */ '../views/routerNesting/index.vue'),
        children:[
          {
            path: '/routerNesting/routerTest1',
            name: 'routerTest1',
            title: 'routerTest1',
            icon: "dashboard",
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "routerTest1" */ '../views/routerNesting/routerTest1.vue')
          },
          {
            path: '/routerNesting/routerTest2',
            name: 'routerTest2',
            title: 'routerTest2',
            icon: "dashboard",
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "routerTest2" */ '../views/routerNesting/routerTest2.vue')
          }
        ]
      },
      {
        path: '/formPage',
        name: 'formPage',
        title: 'formPage',
        icon: "dashboard",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "formPage" */ '../views/formPage.vue')
      },
      {
        path: '/mobile',   // 移动端
        name: 'mobile',
        title: 'mobile',
        icon: "dashboard",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "mobile" */ '../views/mobile.vue')
      },
      {
        path: '/numTo',   // 数字翻滚
        name: 'numTo',
        title: 'numTo',
        icon: "dashboard",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "mobile" */ '../views/numTo.vue')
      },
      {
        path: '/animation',   // 列表滚动
        name: 'animation',
        title: 'animation',
        icon: "dashboard",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "mobile" */ '../views/animation.vue')
      },
      {
        path: '/InfiniteScroll/index',   // 无限滚动
        name: 'InfiniteScroll/index',
        title: 'InfiniteScroll/index',
        icon: "dashboard",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "mobile" */ '../views/InfiniteScroll/index.vue')
      },
      {
        path: '/leftRightScroll/index',   // 左右联动菜单
        name: 'leftRightScroll/index',
        title: 'leftRightScroll/index',
        icon: "dashboard",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "mobile" */ '../views/leftRightScroll/index.vue')
      },
      {
        path: '/boxModel/index',   // 盒子模型
        name: 'boxModel/index',
        title: 'boxModel/index',
        icon: "dashboard",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "mobile" */ '../views/boxModel/index.vue')
      },
      {
        path: '/weChat/index',   // 盒子模型
        name: 'weChat/index',
        title: 'weChat/index',
        icon: "dashboard",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "mobile" */ '../views/weChat/index.vue')
      },

    ]
  },

]

// console.log('routes',routes);
routes[0].children.map(item => {
  if(item.children) {
    item.children.map(citem => {
      // 没有meta属性
    if (!citem.meta) citem.meta = {}
      citem.meta.titles = [
        item.title,
        citem.title
      ]
    })
  } else {
    // 一级路由
    if (!item.meta) item.meta = {}
    item.meta.titles = [
      item.title
    ]
  }
})
const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  next()
})
export default router
